<!-- 轮播图 -->

<template>
    <div class="custom-swiper">
        <transition name="fade">
            <div
              class="swiper"
              @touchstart='start' 
              @touchmove='move' 
              @touchend='end' 
            >
                <div
                  v-for="(item, index) in imgs" 
                  :style="config[index]" 
                  :key="item.cover" 
                  @click="chooseItem(item,index)"
                >
                    <img class="img" :src="item.img">
                </div>
            </div>
        </transition>
    </div>
</template>
<script>
import { onMounted, onUnmounted, reactive, toRefs } from 'vue'

export default {
    setup() {
        const data = reactive({
            timer: null,
            currentIndex: 1, //当前中间imgs数组中index
            centerInfo: '', // 当前中间信息
            startX: '',
            endX: '',
            imgs: [
                {
                    index: 0,
                    img: require('@/assets/images/u70.png'),
                },
                {
                    index: 1,
                    img: require('@/assets/images/u71.png'),
                },
                {
                    index: 2,
                    img: require('@/assets/images/u72.png')
                },
                {
                    index: 3,
                    img: require('@/assets/images/u73.jpg')
                },
                {
                    index: 4,
                    img: require('@/assets/images/u74.png')
                },
                {
                    index: 5,
                    img: require('@/assets/images/u75.jpeg')
                }
            ],
            previous: 0,
            config: [
                {
                    id: 'A',
                    position: 'absolute',
                    width: '70%',
                    height: '100%',
                    top: '0',
                    left: '-131%',
                    opacity: 1,
                    zIndex: 2,
                    transition: '0s'
                },
                {
                    id: 'B',
                    position: 'absolute',
                    width: '70%',
                    height: '100%',
                    top: '0',
                    left: '-58%',
                    opacity: 1,
                    zIndex: 2,
                    transition: '.4s'
                },
                {
                    id: 'center',
                    position: 'absolute',
                    width: '70%',
                    height: '100%',
                    top: '0',
                    left: '15%',
                    marginLeft: '0',
                    opacity: 1,
                    zIndex: 4,
                    transition: '.4s'
                },
                {
                    id: 'C',
                    position: 'absolute',
                    width: '70%',
                    height: '100%',
                    top: '0',
                    left: '88%',
                    opacity: 1,
                    zIndex: 2,
                    transition: '.4s'
                },
                {
                    id: 'D',
                    position: 'absolute',
                    width: '70%',
                    height: '100%',
                    top: '0',
                    left: '161%',
                    opacity: 1,
                    zIndex: 2,
                    transition: '0s'
                }
            ]
        })

        onMounted(() => {
            centerCard(); // 获取中间卡片信息
            addCardStyle();// 加入样式位置的index
            play()
        })
        onUnmounted(() => {
            stop()
        })
        function play() {
            clearInterval(data.timer)
            data.timer = setInterval(() => {
                next();
            }, 3000)
        }
        function stop() {
            clearInterval(data.timer)
        }
        // 滑动上一个
        function prev(index) {
            console.log('prev', index);
            data.config.push(data.config.shift());
            data.currentIndex = data.currentIndex - 1;
            if (data.currentIndex < 0) {
                data.currentIndex = data.imgs.length - 1;
            }
            centerCard();
            centerIndex('prev');
        }
        // 滑动下一个
        function next() {
            data.config.unshift(data.config.pop());
            data.currentIndex = data.currentIndex + 1;
            if (data.currentIndex > data.imgs.length - 1) {
                data.currentIndex = 0;
            }
            centerCard();
            centerIndex('next');
        }
        // 开始移动端滑动屏幕
        function start(event) {
            data.startX = event.changedTouches[0].clientX;
            data.startY = event.changedTouches[0].clientY;
        }
        // 连续滑动
        function move(event) {
            data.endY = event.changedTouches[0].clientY;
            data.endX = event.changedTouches[0].clientX;
            data.stopDefault(event);
            // 如果是滑动，注解下面这段。如果是连续滑动，放开下面注解
            // data.interval = data.endX - data.startX;
            // if (data.interval > 40) {
            //     data.startX = data.endX;
            //     data.prev();
            // }
            // if (data.interval < -40) {
            //     data.startX = data.endX;
            //     next();
            // }
        }
        // 滑动
        function end(event) {
            console.log('end', event);
            // 如果是滑动，放开下面的注解。如果是连续滑动，注解下面
            data.endY = event.changedTouches[0].clientY;
            data.endX = event.changedTouches[0].clientX;
            formatSwiper();
        }
        function formatSwiper() {
            if (data.startX > data.endX) {
                console.log('左边滑动');
                if (data.startX > data.endX + 40) {
                    next();
                }
            } else {
                console.log('右边滑动');
                if (data.endX > data.startX + 40) {
                    prev();
                }
            }
        }
        // 阻止touchmove的横向默认事件（ios快捷操作会关闭页面）
        function stopDefault(event) {
            let differenceY = data.endY - data.startY;
            let differenceX = data.endX - data.startX;
            if (Math.abs(differenceX) > Math.abs(differenceY)) {
                event.preventDefault();
            }
        }
        // 当前imgs在位置上的index（并非img数组的index）
        function centerIndex(val) {
            if (val == 'prev') {
                for (let val of data.imgs) {
                    if (val.index == data.imgs.length - 1) {
                        val.index = 0;
                    } else {
                        val.index = val.index + 1;
                    }
                }
            } else {
                for (let val of data.imgs) {
                    if (val.index == 0) {
                        val.index = data.imgs.length - 1;
                    } else {
                        val.index = val.index - 1;
                    }
                }
            }
        }
        // 点击
        function chooseItem(item, index) {
            console.log('chooseItem', item,index);
            let cycles = item.index;
            if (item.index < 2) {
                for (let i = 0; i < 2 - cycles; i++) {
                    console.log(item.index);
                    prev();
                }
            } else if (item.index > 2) {
                for (let i = -1; i < item.index - 2; i++) {
                    next();
                }
            } else if (item.index == 2) {
                console.log('投票');
            }
        }
        // 计算中间卡片信息
        function centerCard() {
            data.centerInfo = data.imgs[data.currentIndex];
            
        }
        function addCardStyle() {
            if (data.imgs.length > 5) {
                let addtime = data.imgs.length - 5;
                for (let i = 0; i < addtime; i++) {
                    console.log('add');
                    data.config.push({
                        id: 'center',
                        position: 'absolute',
                        width: '70%',
                        height: '100%',
                        top: '0px',
                        left: '15%',
                        marginLeft: '0',
                        opacity: 0,
                        transition: '.4s'
                    });
                }
            }
        }
        return {
            ...toRefs(data),
            end,
            start,
            move,
            chooseItem,
            stopDefault
        }
    }
}
</script>
<style scoped>
.custom-swiper {
    width: 100%;
    height: 100%;
}
.swiper {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    
}
.swiper div {
    opacity: 0;
}
.img {
    width: 100%; 
    height: 100%; 
    border-radius: 10px;
}
</style>